<!-- 纵向布局 -->
<template>
	<el-container class="layout-vertical">
		<el-aside class="elAside">
			<div class="menu" :style="{ width: isCollapse ? '65px' : sideExpandWidth + 'px' }">
				<div class="logo flx-center" :style="{ height: headerHeight + 'px' }">
					<img v-if="!!sideLogo" :src="sideLogo" alt="logo" />
					<span v-show="!isCollapse">{{ systemTitle }}</span>
				</div>
				<el-scrollbar>
					<el-menu
						:default-active="activeMenu"
						:router="false"
						:collapse="isCollapse"
						:collapse-transition="false"
						:unique-opened="true"
						:background-color="sideBgColorGet"
						:text-color="sideTextColorGet"
					>
						<SubMenu :menuList="menuList" />
					</el-menu>
				</el-scrollbar>
			</div>
		</el-aside>
		<el-container>
			<el-header :style="{ height: headerHeight + 'px' }">
				<ToolBarLeft />
				<ToolBarRight />
			</el-header>
			<Main />
		</el-container>
	</el-container>
</template>

<script setup lang="ts" name="layoutVertical">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { GlobalStore } from '@/stores'
import { AuthStore } from '@/stores/modules/auth'
import Main from '@/layouts/components/Main/index.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'

const route = useRoute()
const authStore = AuthStore()
const globalStore = GlobalStore()
const activeMenu = computed(() => route.path)
const menuList = computed(() => authStore.showMenuListGet)
const isCollapse = computed(() => globalStore.themeConfig.isCollapse)
const sideExpandWidth = computed(() => globalStore.themeConfig.sideExpandWidth)
const headerHeight = computed(() => globalStore.themeConfig.headerHeight)
const sideLogo = computed(() => globalStore.themeConfig.sideLogo)
const systemTitle = computed(() => globalStore.themeConfig.systemTitle)
const sideBgColorGet = computed(() => globalStore.sideBgColorGet)
const sideTextColorGet = computed(() => globalStore.sideTextColorGet)
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
